import { Button, Space } from 'antd';
import Table, { ColumnsType } from 'antd/lib/table'
import React from 'react'

export default function MTable() {
  //1. 定义数据的结构
  interface Goods {
    remote_img: string,
    title: string,
    price: number,
    shop: string,
    url: string,
    isZY: boolean,
    img: string,
    id: number
  }

  //2. 定义表格结构
  let columns: ColumnsType<Goods> = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '商品名称',
      dataIndex: 'title',
    },
    {
      title: '价格',
      dataIndex: 'price',
    }
    ,
    {
      title: '图片',
      dataIndex: 'remote_img',
      render: src => {
        return <img src={src} width="80" alt="" />
      }
    },
    {
      title: '店铺',
      dataIndex: 'shop'
    },
    {
      title: '操作',
      fixed: 'right',
      width: 170,
      render: (_, record) => {
        return <Space><Button>修改</Button><Button>删除</Button></Space>
      }
    }

  ];

  //3. 准备数据
  let data: Goods[] = [
    {
      "remote_img": "http://img14.360buyimg.com/n7/jfs/t1/190177/5/20205/91340/612dc9d1Ea57ded86/53a5e2d24dabf32d.jpg",
      "title": "一加 OnePlus 9 Pro 5G旗舰2K+120Hz 柔性屏12GB+256GB 绿洲 骁龙888 65W快充 哈苏专业模式 超广角拍照手机",
      "price": 5499,
      "shop": "一加手机京东自营官方旗舰店",
      "url": "https://item.jd.com/100019141914.html",
      "isZY": true,
      "img": "/images/goods/53a5e2d24dabf32d.jpg",
      "id": 1
    },
    {
      "remote_img": "http://img13.360buyimg.com/n7/jfs/t1/189261/39/3773/121751/60a269ecE4cd8a070/df2735c6ee1a895a.jpg",
      "title": "荣耀Play5T 22.5W超级快充 5000mAh大电池 6.5英寸护眼屏 全网通8GB+128GB极光蓝",
      "price": 1189,
      "shop": "荣耀京东自营旗舰店",
      "url": "https://item.jd.com/100021830458.html",
      "isZY": true,
      "img": "/images/goods/df2735c6ee1a895a.jpg",
      "id": 2
    },
    {
      "remote_img": "http://img13.360buyimg.com/n7/jfs/t1/198525/38/8395/144282/6140705bE7dd39929/e805d8c02b7e1f3b.jpg",
      "title": "Redmi Note 9 4G 6000mAh大电池 骁龙662处理器  18W快充 羽墨黑 6GB+128GB 智能手机 小米 红米",
      "price": 999,
      "shop": "小米京东自营旗舰店",
      "url": "https://item.jd.com/100016784108.html",
      "isZY": false,
      "img": "/images/goods/e805d8c02b7e1f3b.jpg",
      "id": 3
    },
    {
      "remote_img": "http://img11.360buyimg.com/n7/jfs/t1/186256/6/554/135561/6082904aE2a61d056/c921c551039621d0.jpg",
      "title": "荣耀畅玩20 5000mAh超大电池续航 6.5英寸大屏  莱茵护眼 4GB+128GB 极光蓝 双卡双待 全网通",
      "price": 889,
      "shop": "荣耀京东自营旗舰店",
      "url": "https://item.jd.com/100011186161.html",
      "isZY": false,
      "img": "/images/goods/c921c551039621d0.jpg",
      "id": 4
    },
    {
      "remote_img": "http://img13.360buyimg.com/n7/jfs/t1/200673/15/4432/202879/612ddc90Ec08afda5/9ef1faa1babfcf31.jpg",
      "title": "Redmi 9A 5000mAh大电量 1300万AI相机 八核处理器 人脸解锁 4GB+64GB 晴空蓝 游戏智能手机 小米 红米",
      "price": 599,
      "shop": "小米京东自营旗舰店",
      "url": "https://item.jd.com/100014348478.html",
      "isZY": true,
      "img": "/images/goods/9ef1faa1babfcf31.jpg",
      "id": 5
    },
    {
      "remote_img": "http://img11.360buyimg.com/n7/jfs/t1/202873/26/6851/57008/6142ea9cEfeaf2d44/e090f23d33bf3ad7.jpg",
      "title": "Redmi Note 9 Pro 5G 一亿像素 骁龙750G 33W快充 120Hz刷新率 湖光秋色&nbsp;8GB+128GB 智能手机 小米 红米",
      "price": 1499,
      "shop": "小米京东自营旗舰店",
      "url": "https://item.jd.com/100016799386.html",
      "isZY": false,
      "img": "/images/goods/e090f23d33bf3ad7.jpg",
      "id": 6
    },
    {
      "remote_img": "http://img10.360buyimg.com/n7/jfs/t1/209287/31/397/223890/613ea997E79fb207f/4084e39dbe777bfb.jpg",
      "title": "vivo iQOO8 Pro手机5G骁龙888 Plus 120W闪充50W无线闪充电竞游戏手机 iQOO8传奇版 12G 256G 全网通",
      "price": 4199,
      "shop": "iQOO兰珊专卖店",
      "url": "https://item.jd.com/10034785755875.html",
      "isZY": true,
      "img": "/images/goods/4084e39dbe777bfb.jpg",
      "id": 7
    },
    {
      "remote_img": "http://img12.360buyimg.com/n7/jfs/t1/164103/5/13092/213005/60505a06E4cfa3280/9a28034971309f0d.jpg",
      "title": "荣耀V40轻奢版 5G 超级快充 6400万超清四摄 8GB+256GB钛空银 移动联通电信5G 双卡双待手机",
      "price": 3299.00,
      "shop": "荣耀京东自营旗舰店",
      "url": "https://item.jd.com/100019269672.html",
      "isZY": false,
      "img": "/images/goods/9a28034971309f0d.jpg",
      "id": 8
    },
    {
      "remote_img": "http://img11.360buyimg.com/n7/jfs/t1/197561/22/8503/215134/61418df2Edd66359f/0075b1ded4d3fd39.jpg",
      "title": "Redmi K40 骁龙870 三星AMOLED 120Hz高刷直屏 4800万高清三摄 12GB+256GB 幻境 游戏电竞5G手机 小米 红米",
      "price": 1899.00,
      "shop": "小米京东自营旗舰店",
      "url": "https://item.jd.com/100018640796.html",
      "isZY": true,
      "img": "/images/goods/0075b1ded4d3fd39.jpg",
      "id": 9
    },
    {
      "remote_img": "http://img14.360buyimg.com/n7/jfs/t1/180738/35/17355/221785/6107e04aE152a6c7c/82b4fb0cf37fd718.jpg",
      "title": "荣耀Play5T Pro 6400万双摄 6.6英寸全视屏 22.5W超级快充 4000mAh大电池 全网通版8GB+128GB 钛空银",
      "price": 2499.00,
      "shop": "荣耀京东自营旗舰店",
      "url": "https://item.jd.com/100013102509.html",
      "isZY": false,
      "img": "/images/goods/82b4fb0cf37fd718.jpg",
      "id": 10
    }]

  return (
    <Table 
      columns={columns} 
      dataSource={data} 
      bordered 
      rowKey={'id'} 
      scroll={{
        x: 1300
      }}
      />
  )
}
